 <!-- 
 @Author: LW  
 @Date: 2021-01-11 13:49:57  
 @function:业务管理-商品管理
----------------------------------------------------------  
 @Last Modified by: 
 @Modified function:
 --> 
 <template>
   <div>
    <el-card class="box-card card1">
      <div class="searchBox">
        <el-form :inline="true" :model="formSearch">
          <el-form-item  label="搜索：">
            <el-input size="mini"  v-model="formSearch.parameters.keywords" placeholder="输入关键字"></el-input>
          </el-form-item>
          <el-form-item class="goods_type" label="商品类型：">
             <Treeselect
                :disable-branch-nodes="true"
                :show-count="true"
                :options="listCategoryData"
                :normalizer="normalizer"
                v-model="formSearch.parameters.category_id"
                placeholder="请选择所属商品类型"
                clearable 
                :zIndex="9999"
                >
             </Treeselect>
          </el-form-item>
          <el-form-item class="goods_opt">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
            <el-button size="mini" type="danger" icon="el-icon-remove" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small"
            ref="multipleTable"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 100%;"
            :height="tableHeight"
            @selection-change="checkSelect"
            @row-click="handleRowClick"
          >
            <el-table-column type="selection" align="center" width="55px" ></el-table-column>
            <el-table-column align="center" label="序号" width="55px" fixed="left">
               <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column align="center" prop="category_name" label="分类名称" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="goods_no" label="商品货号" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="name" label="商品名称" width="220" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="title" label="副标题" width="320" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="original_price" label="商品价格" width="120">
                <el-table-column align="center" prop="original_price" label="商品原价(元)" width="100"></el-table-column>
                <el-table-column align="center" prop="selling_price" label="售卖单价(元)" width="100"></el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="sales_volume" label="商品销量" width="90" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="is_hot_style_name" label="是否热卖" width="80">
              <template slot-scope="scope">
                <el-switch
                  on-text="是"
                  off-text="不是"
                  active-value="是"
                  inactive-value="否"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_hot_style_name"
                  @change="enableInfo(scope.$index,scope.row,1)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="is_recommend_name" label="是否推荐" width="80">
              <template slot-scope="scope">
                <el-switch
                  on-text="是"
                  off-text="不是"
                 active-value="是"
                  inactive-value="否"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_recommend_name"
                  @change="enableInfo(scope.$index,scope.row,2)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="is_bargain_name" label="是否特价" width="80">
              <template slot-scope="scope">
                <el-switch
                  on-text="是"
                  off-text="不是"
                  active-value="是"
                  inactive-value="否"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_bargain_name"
                  @change="enableInfo(scope.$index,scope.row,3)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="is_shelves_name" label="是否上架" width="80">
              <template slot-scope="scope">
                <el-switch
                  on-text="是"
                  off-text="不是"
                  active-value="是"
                  inactive-value="否"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_shelves_name"
                  @change="enableInfo(scope.$index,scope.row,4)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-remove"
                  size="mini"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination v-bind:child-msg="pageparm" @callFather="pageListInfo"></Pagination>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑等操作弹窗 -->
    <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :top="editForm.top"
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <component v-bind:is="curComponent" v-bind:formInfo="formInfo" v-bind:listInfo="listCategoryData"  @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>

<script>
//引用对象【不同业务，需要各玩各的。别一个界面就完成所有。业务复杂以后，搞死一堆人】
import Pagination from '@/components/common/pagination' //分页组建
import EditForm from "./components/tabpanes"; //编辑

import GoodsinfoHttp from '@/api/business/goodsinfo' //http
const { 
  loadPageList, 
  enableInfo, //
 } = GoodsinfoHttp;

import CategoriesHttp from "@/api/business/goodscategories"; //http
const { loadCategoriesTreeList } = CategoriesHttp;

import Treeselect from "@riophae/vue-treeselect";//多选组件
import "@riophae/vue-treeselect/dist/vue-treeselect.css";//import the styles

export default {
  //注册组件
  components: {
    Pagination, //分页
    EditForm,
    Treeselect
  },
  data() {
    return {
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.795, //表格高度
      pageparm:{ currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData:[], //表格返回信息
      multipleSelection: null, //复选框
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: 'sort',
        order: 'asc',
        parameters: {
          keywords:"",
          category_id:"",
        }, //关键字
      },
      listCategoryData:[],//商品分类列表
      normalizer(node) {
        //转换分类树状信息列的格式
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        };
      },
      curComponent: null,
      disabled: false,
      //编辑框窗体参数
      editForm: {
        top:"10vh",
        formVisible: false, //窗体是否显示
        formTitle: '', //窗体标题
        width:"55%"
      },
      formInfo: {},
    }
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //获取分类树状列表信息
    this.loadCategoriesTreeList();
    //初始化获取
    this.loadList();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //点击复选框触发，复选框样式的改变
    checkSelect(val) {
      this.multipleSelection = val
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取分类树状列表信息
    loadCategoriesTreeList() {
      let self = this;
      let par = {};
      loadCategoriesTreeList(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listCategoryData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg);  
        }
      });
    },
    //获取数据方法
    loadList() {
      this.loading = true
      loadPageList(this.formSearch).then((response) => {
        let data = response.data
        if (data.Code === 1000) {
          this.listData = data.Data
          //分页赋值
          this.pageparm.currentPage = this.formSearch.page
          this.pageparm.pageSize = this.formSearch.limit
          this.pageparm.total = data.Count
        } else {
          this.$messageTip.warning(data.Msg)
          this.listData = []
          this.pageparm.currentPage = this.formSearch.page
          this.pageparm.pageSize = this.formSearch.limit
          this.pageparm.total = data.Count
        }
        this.loading = false
      })
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage
      this.formSearch.limit = par.pageSize
      this.loadList();
    },
     //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.width = "60%";
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改信息";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
      } else {
        this.editForm.formTitle = "新增信息";
        this.formInfo = {};
      }
      this.curComponent = EditForm;
    },
    //是否开启 热卖  推荐  特价  上架
    enableInfo(index,row,type) {
      let par = { 
        id: row.id,
        type:type
      };
      enableInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          switch (type) {
             case 1:
                this.listData[index].is_hot_style = this.listData[index].is_hot_style==100?110:100;
              break;
             case 2:
                this.listData[index].is_recommend = this.listData[index].is_recommend==100?110:100;
              break;
             case 3:
                this.listData[index].is_bargain = this.listData[index].is_bargain==100?110:100;
              break;
             case 4:
                this.listData[index].is_shelves = this.listData[index].is_shelves==100?110:100;
              break;
              default:
                break;
            }
            this.$set(this.listData, index, row);
            this.$messageTip.success(data.Msg);
        } else {
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    //删除
    handleRemove(index, row) {
      let self = this;
      if ( row != null || (this.$refs.multipleTable && this.$refs.multipleTable.store.states.selection.length > 0)) {
        this.$messageTip.boxWarning("确定要删除吗?")
          .then(() => {
            let par = [];
            if (row != null) {
              par.push(row.id);
            } else {
              let selectData = self.$refs.multipleTable.store.states.selection;
              for (let index = 0; index < selectData.length; index++) {
                par.push(selectData[index].id);
              }
            }
            removeInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.loadList();
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          })
          .catch(() => {
            this.$messageTip.info( "已取消删除！"); 
          });
      } else {
         this.$messageTip.info( "请选择删除项！"); 
      }
    },
    //编辑操作回调
    callBack(info) {
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.loadList();
      }
    },
  },
}
</script>

<style>
  .vue-treeselect {
    top: 5px;
    min-width:170px;
    transform-origin: center top;
    z-index: 2007;
    position: absolute;
  }
  .vue-treeselect__control,
  .vue-treeselect__input-container {
    height: 28px !important;
  }
  .vue-treeselect__placeholder,
  .vue-treeselect__input,
  .vue-treeselect__single-value {
    line-height: 28px;
    font-size: 12px;
  }
  .goods_type .el-form-item__content{
    position: absolute; 
  }
  .goods_opt{
    margin-left:180px !important;
  }
</style>
